<template>
  <div>
    <div id="main" style="width: 100%; height: 87vh">
  </div>
</div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';
import { reactive } from 'vue';
import {useStore} from 'vuex';
export default {
  components: {
    // PlayGround
  },
  setup() {
    const data15 = reactive({
      temperature_15: "",
      humidity_15: "",
      ammonia_15: "",
      light_15: "",
    });
    const datamonth = reactive({
      temperature_month: "",
      humidity_month: "",
      ammonia_month: "",
      light_month: "",
    });
    const datayear = reactive({
      temperature_year: "",
      humidity_year: "",
      ammonia_year: "",
      light_year: "",
    });
    console.log("66666");

    // const store = useStore();
    const socketUrl = `ws://127.0.0.1:9090/websocket/`;
    console.log("666622226");
    const refresh = () => {
      socket.send("add");

    }
    let t = 1;
    let socket = null;
    onMounted(() => {
      socket = new WebSocket(socketUrl);
      console.log("66666");
      socket.onopen = () => {
        t = 1;
        window.setInterval(() => {
          if (t)
            setTimeout(refresh, 0)
        }, 3000)
        console.log("连接成功!");

      }

      socket.onmessage = msg => {
        const data = JSON.parse(msg.data);
        console.log(data);

        data15.temperature_15 = data.temperature_15;
        data15.humidity_15 = data.humidity_15;
        data15.ammonia_15 = data.ammonia_15;
        data15.light_15 = data.light_15;

        datamonth.temperature_month = data.temperature_month;
        datamonth.humidity_month = data.humidity_month;
        datamonth.ammonia_month = data.ammonia_month;
        datamonth.light_month = data.light_month;

        datayear.temperature_year = data.temperature_year;
        datayear.humidity_year = data.humidity_year;
        datayear.ammonia_year = data.ammonia_year;
        datayear.light_year = data.light_year;

      }
      socket.onclose = () => {
        console.log("连接断开了！");
        t = 0;
      }
    });
    onUnmounted(() => {
      socket.close();
    })
  },
  name: "Home",
  data() {
    return {}
  },
  mounted() { //页面元素渲染之后再触发

    var option = {
      title: {
        text: '禽舍数据'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['光照强度 lx', '湿度 %rh', '温度 ℃', '氨气浓度 ug/kg']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '光照强度 lx',
          type: 'line',
          data: [],
          smooth: true,
          stack: 'Total',
          // data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '湿度 %rh',
          type: 'line',
          smooth: true,
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '温度 ℃',
          type: 'line',
          smooth: true,
          stack: 'Total',
          data: [30, 22, 18, 34, 27, 33, 29]
        },
        {
          name: '氨气浓度 ug/kg',
          type: 'line',
          smooth: true,
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        }
      ]
    };
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    this.request.get("/echarts/example").then(res => {
      // 填空
      // option.xAxis.data = res.data.x
      option.series[0].data = res.data.y
      // 数据准备完毕之后再set
      myChart.setOption(option);
    })
    this.request.get("/echarts/members").then(res => {
      // 填空
      // option.xAxis.data = res.data.
      option.series[1].data = res.data.y2
      // option.series[3].data = res.data.y2
      // 数据准备完毕之后再set
      myChart.setOption(option);
    })
    this.request.get("/echarts/weche").then(res => {
      // 填空
      // option.xAxis.data = res.data.
      option.series[2].data = res.data.qw
      // option.series[3].data = res.data.y2
      // 数据准备完毕之后再set
      myChart.setOption(option);
    })
    this.request.get("/echarts/membersss").then(res => {
      // 填空
      // option.xAxis.data = res.data.
      option.series[3].data = res.data.y4
      // option.series[3].data = res.data.y2
      // 数据准备完毕之后再set
      myChart.setOption(option);
    })
  }
}
</script>

<style scoped>

</style>